<template>
	<view class="page">
		<page-head :title="title"></page-head>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image v-if="showImg" :src="value.img"></image>
					</view>
					<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
						<view class="text" style="height: 50upx;text-align: left">
							{{value.productName}}
						</view>
						<view class="uni-flex uni-row">
							<view class="text" style="flex: 1;">小代:{{value.price1}}</view>
							<view class="text" style="flex: 1;">大代:{{value.price2}}</view>
							<view class="text" style=" color:#FF3333; flex: 1;">零售:{{value.price3}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'media-list',
				showImg: false,
				list: [{
						productName: '贝芙雅眼贴',
						price1: '39',
						price2: '35',
						price3: '49'
					},
					{
						productName: '经典敷尔佳',
						price1: '72',
						price2: '69',
						price3: '89'
					},
					{
						productName: '胶原敷尔佳',
						price1: '72',
						price2: '69',
						price3: '89'
					},
					{
						productName: '敷尔佳黑膜',
						price1: '108',
						price2: '99',
						price3: '138'
					},
					{
						productName: '白芙芙',
						price1: '88',
						price2: '78',
						price3: '105'
					},
					{
						productName: '绿芙芙',
						price1: '82',
						price2: '72',
						price3: '99'
					},
					{
						productName: '可复美',
						price1: '105',
						price2: '95',
						price3: '140'
					},
					{
						productName: '艺霏虾青素',
						price1: '208',
						price2: '190',
						price3: '260'
					},
					{
						productName: '优斐斯传明酸',
						price1: '208',
						price2: '190',
						price3: '260'
					},
					{
						productName: '芙清',
						price1: '85',
						price2: '75',
						price3: '120'
					},
					{
						productName: '菲尔思',
						price1: '61',
						price2: '51',
						price3: '138'
					},
					{
						productName: '创福康',
						price1: '93',
						price2: '83',
						price3: '108'
					},
					{
						productName: '创尔美',
						price1: '88',
						price2: '78',
						price3: '108'
					},
					{
						productName: '绽妍防晒',
						price1: '65',
						price2: '55',
						price3: '99'
					},
					{
						productName: '绽妍面膜',
						price1: '78',
						price2: '70',
						price3: '128'
					},
					{
						productName: '乾佰纳生物膜',
						price1: '78',
						price2: '68',
						price3: '168'
					},
					{
						productName: '乾佰纳透明酸质钠',
						price1: '58',
						price2: '48',
						price3: '88'
					},
					{
						productName: '博乐达',
						price1: '238',
						price2: '218',
						price3: '318'
					},
					{
						productName: '依珊面霜',
						price1: '128',
						price2: '118',
						price3: '198'
					},
					{
						productName: '九立德玻尿酸',
						price1: '85',
						price2: '78',
						price3: '128'
					},
				]
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showImg = true;
			}, 400)
		}
	}
</script>

<style>
	.title {
		padding: 20upx;
	}

	.uni-media-list-text-top {
		line-height: 36upx;
		font-size: 30upx;
		margin-left: 20upx;
	}

	.flex-item {
		width: 33.3%;
		height: 36upx;
		text-align: center;
		line-height: 36upx;
	}
</style>
